<template>
	<view class="page">
		<view class="page_header">
			<navigation textAlign="left">订单列表</navigation>
			<view class="page_header_search_panel">
				<image class="page_header_search_icon" src="https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/search.png" mode="aspectFit"></image>
				<input class="page_header_search_input" v-model="searchModelSearch" @confirm="search" type="text" value="" placeholder="请输入订单编号或者订单名称" placeholder-class="page_header_search_placeholder" />
			</view>
			<tabs class="tabs" :list="tabs" v-model="tabActive" seamless="true"></tabs>
		</view>
		<view class="page_scroll">
			<swiper :current-item-id="tabActive" @change="swiperChange" class="swiper-container">
				<swiper-item :item-id="tabs[0]">
					<scroll-view scroll-y="true" class="page_main" scroll-with-animation="true" enable-back-to-top="true" @scrolltolower="scrollBottom" :lower-threshold="100">
						<view class="list">
							<order-list :order-list="awaitOrderList" @search="search"></order-list>
						</view>
						<view class="no-data">
							<view class="more"><uni-load-more :status="awaitMoreStatus" :content-text="awaitMoreContentText" iconType="spinner" color="#666666"></uni-load-more></view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item :item-id="tabs[1]">
					<scroll-view scroll-y="true" class="page_main" scroll-with-animation="true" enable-back-to-top="true" @scrolltolower="scrollBottom" :lower-threshold="100">
						<view class="list">
							<order-list :order-list="marchOrderList" @search="search"></order-list>
						</view>
						<view class="no-data">
							<view class="more"><uni-load-more :status="marchMoreStatus" :content-text="marchMoreContentText" iconType="spinner" color="#666666"></uni-load-more></view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item :item-id="tabs[2]">
					<scroll-view scroll-y="true" class="page_main" scroll-with-animation="true" enable-back-to-top="true" @scrolltolower="scrollBottom" :lower-threshold="100">
						<view class="list">
							<order-list :order-list="alreadyOrderList" @search="search"></order-list>
						</view>
						<view class="no-data">
							<view class="more"><uni-load-more :status="alreadyMoreStatus" :content-text="alreadyMoreContentText" iconType="spinner" color="#666666"></uni-load-more></view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item :item-id="tabs[3]">
					<scroll-view scroll-y="true" class="page_main" scroll-with-animation="true" enable-back-to-top="true" @scrolltolower="scrollBottom" :lower-threshold="100">
						<view class="list">
							<order-list :order-list="overtimeOrderList" @search="search"></order-list>
						</view>
						<view class="no-data">
							<view class="more"><uni-load-more :status="overtimeMoreStatus" :content-text="overtimeMoreContentText" iconType="spinner" color="#666666"></uni-load-more></view>
						</view>	
					</scroll-view>
				</swiper-item>
				<swiper-item :item-id="tabs[4]">
					<scroll-view scroll-y="true" class="page_main" scroll-with-animation="true" enable-back-to-top="true" @scrolltolower="scrollBottom" :lower-threshold="100">
						<view class="list">
							<order-list :order-list="allOrderList" @search="search"></order-list>
						</view>
						<view class="no-data">
							<view class="more"><uni-load-more :status="allMoreStatus" :content-text="allMoreContentText" iconType="spinner" color="#666666"></uni-load-more></view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import * as serveApi from '@/api/orgApi/serve.js';
import { uniLoadMore } from '@dcloudio/uni-ui';
import orderList from './orgOrderList.vue';
export default {
	components: {
		orderList
	},
	data() {
		return {
			searchModelSearch: '',
			enums: this.$enums,
			tabs: ['待服务', '服务中', '已服务', '已超时', '全部订单'],
			tabActive: '待服务',
			allOrderList: [],
			allSearchModel: {
				size: 10,
				current: 1,
				status: -1
			},
			// more
			allMoreStatus: 'more',
			allMoreContentText: {
				// 加载各状态文字说明。
				contentdown: '加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多了'
			},
			awaitOrderList: [],
			awaitSearchModel: {
				size: 10,
				current: 1,
				status: this.$enums['机构订单状态']['待服务']
			},
			// more
			awaitMoreStatus: 'more',
			awaitMoreContentText: {
				// 加载各状态文字说明。
				contentdown: '加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多了'
			},
			marchOrderList: [],
			marchSearchModel: {
				size: 10,
				current: 1,
				status: this.$enums['机构订单状态']['服务中']
			},
			// more
			marchMoreStatus: 'more',
			marchMoreContentText: {
				// 加载各状态文字说明。
				contentdown: '加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多了'
			},
			alreadyOrderList: [],
			alreadySearchModel: {
				size: 10,
				current: 1,
				status: this.$enums['机构订单状态']['已服务']
			},
			// more
			alreadyMoreStatus: 'more',
			alreadyMoreContentText: {
				// 加载各状态文字说明。
				contentdown: '加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多了'
			},
			overtimeOrderList: [],
			overtimeSearchModel: {
				size: 10,
				current: 1,
				status: this.$enums['机构订单状态']['已超时']
			},
			// more
			overtimeMoreStatus: 'more',
			overtimeMoreContentText: {
				// 加载各状态文字说明。
				contentdown: '加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多了'
			}
		};
	},
	methods: {
		swiperChange(e) {
			this.$set(this, 'tabActive', e.detail.currentItemId);
			if (this.tabActive == '待服务') {
				this.awaitSearchModel.current = 1;
				this.awaitSearchModel.search = this.searchModelSearch;
			} else if (this.tabActive == '服务中') {
				this.marchSearchModel.current = 1;
				this.marchSearchModel.search = this.searchModelSearch;
			} else if (this.tabActive == '已服务') {
				this.alreadySearchModel.current = 1;
				this.alreadySearchModel.search = this.searchModelSearch;
			} else if (this.tabActive == '已超时') {
				this.overtimeSearchModel.current = 1;
				this.overtimeSearchModel.search = this.searchModelSearch;
			} else {
				this.allSearchModel.current = 1;
				this.allSearchModel.search = this.searchModelSearch;
			}
			this.getOrderList();
		},
		search() {
			if (this.tabActive == '待服务') {
				this.awaitSearchModel.current = 1;
				this.awaitSearchModel.search = this.searchModelSearch;
			} else if (this.tabActive == '服务中') {
				this.marchSearchModel.current = 1;
				this.marchSearchModel.search = this.searchModelSearch;
			} else if (this.tabActive == '已服务') {
				this.alreadySearchModel.current = 1;
				this.alreadySearchModel.search = this.searchModelSearch;
			} else if (this.tabActive == '已超时') {
				this.overtimeSearchModel.current = 1;
				this.overtimeSearchModel.search = this.searchModelSearch;
			} else {
				this.allSearchModel.current = 1;
				this.allSearchModel.search = this.searchModelSearch;
			}
			this.getOrderList();
		},
		getOrderList() {
			if(this.tabActive == '待服务') {
				this.awaitMoreStatus = 'loading';
				serveApi
					.queryOrder(this.awaitSearchModel)
					.then(res => {
						if (res.code === 0) {
							if (this.awaitSearchModel.current == 1) {
								this.awaitOrderList = [];
							}
							if (res.data && res.data.length == 10) {
								this.awaitMoreStatus = 'more';
								this.awaitSearchModel.current += 1;
								this.awaitOrderList = [...this.awaitOrderList, ...res.data];
							} else if (res.data && res.data.length < 10) {
								this.awaitMoreStatus = 'noMore';
								this.awaitSearchModel.current += 1;
								this.awaitOrderList = [...this.awaitOrderList, ...res.data];
							} else {
								this.awaitMoreStatus = 'noMore';
							}
						}
					})
					.catch(e => {
						this.awaitMoreStatus = 'noMore';
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			} else if(this.tabActive == '服务中') {
				this.marchMoreStatus = 'loading';
				serveApi
					.queryOrder(this.marchSearchModel)
					.then(res => {
						if (res.code === 0) {
							if (this.marchSearchModel.current == 1) {
								this.marchOrderList = [];
							}
							if (res.data && res.data.length == 10) {
								this.marchMoreStatus = 'more';
								this.marchSearchModel.current += 1;
								this.marchOrderList = [...this.marchOrderList, ...res.data];
							} else if (res.data && res.data.length < 10) {
								this.marchMoreStatus = 'noMore';
								this.marchSearchModel.current += 1;
								this.marchOrderList = [...this.marchOrderList, ...res.data];
							} else {
								this.marchMoreStatus = 'noMore';
							}
						}
					})
					.catch(e => {
						this.marchMoreStatus = 'noMore';
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			} else if(this.tabActive == '已服务') {
				this.alreadyMoreStatus = 'loading';
				serveApi
					.queryOrder(this.alreadySearchModel)
					.then(res => {
						if (res.code === 0) {
							if (this.alreadySearchModel.current == 1) {
								this.alreadyOrderList = [];
							}
							if (res.data && res.data.length == 10) {
								this.alreadyMoreStatus = 'more';
								this.alreadySearchModel.current += 1;
								this.alreadyOrderList = [...this.alreadyOrderList, ...res.data];
							} else if (res.data && res.data.length < 10) {
								this.alreadyMoreStatus = 'noMore';
								this.alreadySearchModel.current += 1;
								this.alreadyOrderList = [...this.alreadyOrderList, ...res.data];
							} else {
								this.alreadyMoreStatus = 'noMore';
							}
						}
					})
					.catch(e => {
						this.alreadyMoreStatus = 'noMore';
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			} else if(this.tabActive == '已超时') {
				this.overtimeMoreStatus = 'loading';
				serveApi
					.queryOrder(this.overtimeSearchModel)
					.then(res => {
						if (res.code === 0) {
							if (this.overtimeSearchModel.current == 1) {
								this.overtimeOrderList = [];
							}
							if (res.data && res.data.length == 10) {
								this.overtimeMoreStatus = 'more';
								this.overtimeSearchModel.current += 1;
								this.overtimeOrderList = [...this.overtimeOrderList, ...res.data];
							} else if (res.data && res.data.length < 10) {
								this.overtimeMoreStatus = 'noMore';
								this.overtimeSearchModel.current += 1;
								this.overtimeOrderList = [...this.overtimeOrderList, ...res.data];
							} else {
								this.overtimeMoreStatus = 'noMore';
							}
						}
					})
					.catch(e => {
						this.overtimeMoreStatus = 'noMore';
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			} else {
				this.allMoreStatus = 'loading';
				serveApi
					.queryOrder(this.allSearchModel)
					.then(res => {
						if (res.code === 0) {
							if (this.allSearchModel.current == 1) {
								this.allOrderList = [];
							}
							if (res.data && res.data.length == 10) {
								this.allMoreStatus = 'more';
								this.allSearchModel.current += 1;
								this.allOrderList = [...this.allOrderList, ...res.data];
							} else if (res.data && res.data.length < 10) {
								this.allMoreStatus = 'noMore';
								this.allSearchModel.current += 1;
								this.allOrderList = [...this.allOrderList, ...res.data];
							} else {
								this.allMoreStatus = 'noMore';
							}
						}
					})
					.catch(e => {
						this.allMoreStatus = 'noMore';
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			}
		},
		// 滑动到底部。分页处理
		scrollBottom() {
			this.getOrderList();
		}
	},
	onLoad(opction) {
		if (opction) {
			console.log('opction', opction);
			this.$set(this, 'tabActive', opction.type);
		}
	}
};
</script>

<style lang="stylus" scoped>
.page_header_search_panel
	margin-bottom 20rpx
.page_scroll
	position absolute
	top calc(283rpx + var(--status-bar-height))
	right 0rpx
	bottom 0rpx
	left 0rpx
	.page_main
		padding 0rpx 30rpx
		box-sizing border-box
	.swiper-container, .page_main
		height 100%
		background-color rgba(247, 247, 247, 1)
		.list
			width 100%
			
</style>
